<template>
  <div>
    <div
      id="chart"
      style="width: 600px; height: 400px; background-color: pink"
    ></div>

    <el-button @click="openEcharts">打开组件1</el-button>
    <el-button @click="openEcharts2">打开组件2</el-button>
    <el-button @click="openEcharts3">打开组件3</el-button>
 
   
    <!-- 组件1 -->
    <dialog1 :newDialogFormVisible="newDialogFormVisible"  @closeDialog="closeDialog"></dialog1>

    <!--组件2 -->
    <dialog2  :isDialog2.sync="isDialog2" ></dialog2>

    <!-- 组件3 -->
    <el-dialog
        title="新建1"
        :visible="isDialog1"
        :close-on-click-modal="false"
        @update:visible="isDialog1=false"
        append-to-body
       
      >
       <div>
          这是一段内容
       </div>
      <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog1">取 消</el-button>
            <el-button type="primary" @click="closeDialog1">确 定</el-button>
      </div>
    </el-dialog>
 
  </div>
</template>

<script>
import dialog1 from "./components/dialog1.vue";
import dialog2 from "./components/dialog2.vue";
export default {
  components: {
    dialog1,
    dialog2
  },
  data() {
    return {
      newVisible: false,
      newDialogFormVisible: false,
      isDialog2: false,
      isDialog1: false
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    //弹窗中打开echarts
    openEcharts() {
      this.newDialogFormVisible = true;
    },
    openEcharts2() {
      this.isDialog2 = true;
    },
    closeDialog() {
      this.newDialogFormVisible = false;
    },
    closeDialog1() {
      this.$emit("update:isDialog1", '1111');
    },
    openEcharts3() {
      this.isDialog1 = true;
    },
    // trigger(val) {
    //   console.log("我触发了");
    //   console.log(val);
    //   console.log("我触发了");
    // },

    initCharts() {
      let chart = this.$echarts.init(document.getElementById("chart"));
      //全局配置
      var option = {
        color: ["red", "black"],
        //设置x和y轴的文字颜色,默认为黑色
        textStyle: {
          color: "black"
        },
        //1.左上角标题,具体配置看文档
        title: {
          text: "销售额对比",
          textStyle:{
            color:"#fff"
          }
        },

        //2.提示信息
        tooltip: {
          trigger: "axis",
          //axisPointer:指示器类型一般可在全局配置tooltip和xAxis和yAxis里面进行配置
          /*
           line:直线指示器
           shadow:阴影指示器
           none:无指示器
           cross:十字准星指示器,竖线和横线交叉
          */
          axisPointer: {
            type: "shadow",
            lineStyle: {
              //仅当type为line设置有效
              color: "blue"
            },
            shadowStyle: {
              //仅当type为shadow设置有效
              // color: "blue"
            },
            crossStyle: {
              //仅当type为cross设置有效
              color: "pink"
            },
            //是否开启动画---不生效

            //指示器的底部文本标签
            label: {
              show: true,
              color: "pink" //文字颜色。
              //等等属性
            }
          },
          showContent: true, //是否显示提示框浮层，不显示内容可设置为false
          alwaysShowContent: false, //是否永远显示提示框内容，默认是移出触发提示区域一定时间后隐藏，设置为true可以一直显示
          triggerOn: "click | mousemove", //提示框触发条件，点击触发还是移入触发
          //showDelay: 3000,  //浮层的延迟弹出时间   alwaysShowContent为true时失效
          enterable: false, //鼠标可以进去提示框浮层中，默认false,需要直接为true
          confine: true, //将浮层限制在图表区域内
          position: ["50%", "80%"], //提示层固定在哪个位置，默认值是随着鼠标滑动的
          //postion:[10,10] 绝对位置，相对于左侧10px，右侧10px, position:['50%','50%'] 相对位置，中心位置
          formatter: {}, //见文档配置
          // backgroundColor:"pink",  //提示框浮层的背景颜色
          borderColor: "pink", ///提示框浮层的边框颜色
          borderWidth: 1, ///提示框浮层的边框宽度
          padding: 5, //提示框里面的内容的内边距
          textStyle: {
            //提示框浮层内部里面文本样式 /更多配置见文档
            color: "#fff" //文字的颜色
          }
        },
        //3.展示图例
        legend: {
          show: true, //是否显示图例
          data: ["销售额"],
          /*
                      data:图里的额数据数组，单独设置某一个图例的样式，其他的配置见文档
                      {
                        name: '销售额',
                        icon: 'circle',
                        textStyle: {
                          color:"black"
                        }
                      }
                      */
          top: "auto", //图例组件离容器上侧的距离参数可以是"auto"和number,"auto就是居中",后面还有left和bottom
          right: "auto",
          width: "auto", //图例组件的宽度，默认自适宜，height也是
          orient: "vertical", //图例列表的布局朝向 默认是horizontal
          align: "auto", //默认自动。根据组件的位置和orient决定
          padding: 5, //图例的内边距
          itemGap: 5, //图例每一项之间的间隔，横向布局为水平间隔，纵向布局时为纵向间隔
          itemWidth: 25, //图例标记的宽度
          itemHeight: 14, //图例标记的高度
          itemStyle: {
            //图例的图形样式
            // color: "red"  //图形的颜色，不设置一般就是图表的颜色,一旦设置就固定为这个颜色，关闭图例时也是这个色，所以一般默认色
            //这里的配置具体参考文档
          },

          lineStyle: {
            //折线图横线样式设置，这里是柱状图暂不在这里写
          },
          symbolRotate: 20, //图形旋转角度，类型是number | inherit
          // formatter:'Legend {name}',  //自定义格式化图例文本，支持字符串模板和回调函数,name就是data中的数据
          formatter: function(name) {
            return "季度" + name;
          },
          inactiveColor: "blue", //图例关闭时的颜色
          inactiveBorderColor: "yellow", //图例关闭时的描边颜色
          inactiveBorderWidth: 32, //图例关闭时的描边粗细
          textStyle: {
            //图例的公用文本样式
            color: "#333" //图例的文字颜色
          },
          tooltip: {
            //默认不显示，可以在lengend文字很多的时候对文字做裁剪并且开启tooltip
            show: true
          }
        },

        //4.直角坐标系
        grid: {
          show: true, //是否显示直角坐标系风格
          left: "10%", //grid离容器左侧的距离,另外可以设置top:bottom,right
          width: "auto", //grid组件的宽度，默认自适应,另外也可以设置height
          backgroundColor: "transparent", //网格的背景色，前提示grid.show=true
          borderColor: "blue", //网格的边框颜色
          borderWidth: 1, //网格边框线宽
          tooltip: {
            //可以设置在全局tooltip,可以设置在坐标系中，可以设置在series中，也可以设置在系列的每个数据项中series.data.tooltip
            show: true
          }
        },

        //5.直角坐标系中grid中的x轴
        xAxis: {
          show: true, //是否显示x轴,默认显示
          alignTicks: true, //在多个x轴为数值轴的时候，可以开启该配置项目自动对齐刻度，只对"value"和"log"类型的轴有效
          position: "bottom", //x轴的位置，可选值是bottom和top
          type: "category", //分别对应的值有value,category,time,log，默认是category
          // name: "坐标轴名称", //坐标轴名称
          // nameLocation:"middle",  //名称位置,start,end,middle==center
          // nameTextStyle: {   //坐标轴名称文字样式
          // },
          // nameGap:32,  //坐标轴名称与轴线的距离
          // inverse: false,  //是否是反向坐标轴
          // min:"",  //设置坐标轴刻度最小值，还有max
          data: [
            "2012年",
            "2013年",
            "2014年",
            "2015年",
            "2016",
            "2017",
            "2018",
            "2019",
            "2020",
            "2021",
            "2022"
          ],
          axisPointer: {
            show: true
          },

          axisLine: {
            //坐标轴线相关设置
            show: true, //是否显示坐标轴线
            lineStyle: {
              color: "yelllow", //坐标轴线的颜色
              width: 1, //坐标轴线宽,
              type: "solid" //线的类型   solid,dashed,dotted
            }
          },

          axisTick: {
            //坐标轴刻度的相关设置
            show: true, //是否显示坐标轴刻度
            alignWithLabel: true, //刻度线和标签对齐
            interval: 0, //坐标轴刻度的显示间隔，默认采用标签不重叠的策略显示标签，可以设置为0强制显示所有，1就是间隔显示
            inside: false, //刻度是否朝内，默认为是超外是false
            length: 5, //刻度的样式高度
            lineStyle: {
              //刻度线的样式设置
              color: "red"
            }
          },

          axisLabel: {
            //坐标轴刻度标签的相关设置
            show: true, //是否显示刻度标签
            interval: 0, //坐标轴刻度标签的显示间隔，默认采用标签不重叠的策略显示标签，可以设置为0强制显示所有，1就是间隔一个标签显示,以此类推
            inside: false, //刻度标签是否朝内，默认为是超外是false
            rotate: 45, //刻度标签的旋转角度，范围是-90~90
            margin: 8, //刻度标签与轴线之间的距离，也就上下距离
            // formatter: '{value}'   //刻度标签的自定义格式
            // formatter: function (value, index) {
            //   return value+"kg"
            // }
            // showMinLabel:true,//是否显示最小的tick的label,可选值是true,false,null,默认会自动判定，类似也有showMaxLabel
            hideOverlap: false, //是否隐藏重叠的标签
            color: "black" //刻度标签的文字颜色

            //详细配置查看文档
          },
          splitLine: {
            //坐标轴在grid区域中的分割线
            show: false, //默认数值轴显示，类目轴不显示
            interval: 1, // 坐标轴分割线显示间隔通axisLabel.interval一样
            lineStyle: {
              //分割线的样式
              color: "yellow"
            }
          }
        },
        yAxis: {},
        series: [
          {
            name: "销售额",
            type: "bar",
            data: [1200, 1800, 1300, 400, 500, 300, 100, 600, 700, 900, 1000]
          }
        ]
      };

      chart.setOption(option);
    }
  }
};
</script>

<style>
</style>
